<template>
  <div class="app-main">
    <el-row>
      <el-col :span="18"><div class="grid-content bg-purple-dark" />
        <el-row>
          <el-col :span="13"><div class="grid-content bg-purple-dark" /><div class="leftba">
            <div class="header" style="margin-bottom: 23px;">
              <div
                class="texttop"
                style="
    font-size: 16px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    color: #333;"
              >工单统计</div>
              <div
                class="textbott"
                style="    margin-left: 10px;
             font-size: 12px;
               font-family: PingFangSC-Regular,PingFang SC;
                font-weight: 400;
               color: #999;
               height: 20px;
               line-height: 20px;"
              >2022.10.01 ~ 2022.10.29</div>
            </div>
            <div class="body">
              <div class="state">
                <div class="itme">
                  <div class="num color1 text-shadow1">704</div>
                  <div class="text color2">工单总数(个)</div>
                </div>
              </div>
              <div class="state">
                <div class="itme">
                  <div class="num color1 text-shadow1">3</div>
                  <div class="text color2">完成工单(个)</div>
                </div>
              </div> <div class="state">
                <div class="itme">
                  <div class="num color1 text-shadow1">0</div>
                  <div class="text color2">进行工单(个)</div>
                </div>
              </div> <div class="state">
                <div class="itme">
                  <div class="num color1 text-shadow1">695</div>
                  <div class="text color2">取消工单(个)</div>
                </div>
              </div>
            </div>
          </div></el-col>
          <el-col :span="11"><div class="grid-content bbbbb bg-purple-dark">
            <!-- 右边 -->
            <div class="maning">
              <div class="imgaa" style="display: flex;margin-bottom: 23px;">
                <div
                  class="texttop"
                  style="
                    font-size: 16px;
                    font-family: PingFangSC-Semibold,PingFang SC;
                    font-weight: 600;
                    color: #333;"
                >工单统计</div>
                <div
                  class="textbott"
                  style="    margin-left: 10px;
             font-size: 12px;
               font-family: PingFangSC-Regular,PingFang SC;
                font-weight: 400;
               color: #999;
               height: 20px;
               line-height: 20px;"
                >2022.10.01 ~ 2022.10.29</div>
              </div>
              <div class="imgbb " style="display: flex;">
                <div class="state imgbbitme22">
                  <div class="itme ">
                    <div class="imgbbitme">13521</div>
                    <div class="iimgbbi">订单量(个)</div>
                  </div>
                </div>
                <div class="state imgbbitme22">
                  <div class="itme">
                    <div class="imgbbitme">8.85</div>
                    <div class="iimgbbi">销售额(万元)</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </el-col>
        </el-row>
        <!-- eacthc可视化 -->
        <div class="sbott">
          <div class="header">
            <div class="title">
              销售数据
              <div
                class="textbott"
                style="    margin-left: 40px;
                display: inline-block;
             font-size: 12px;
                font-weight: 400;
               color: #999;
               height: 20px;
               line-height: 20px;"
              >2022.10.01 ~ 2022.10.29</div>
            </div>
            <div class="week-month">
              <div class="itme is-checken">周</div>
              <div class="itme">月</div>
              <div class="itme">年</div>
            </div>
          </div>
          <div class="bottert">
            <div class="chart">
              <div id="main" style="width: 500px;height:390px;" />
            </div>
            <div class="chart">
              <div id="main11" style="width: 500px;height:350px;" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6"><div class="grid-content bg-purple-dark" />最右边</el-col>
    </el-row>
    <!-- <el-row>
      <el-col :span="14"><div class="grid-content bg-purple-dark" />下面</el-col>
      <el-col :span="10"><div class="grid-content bg-purple-dark" />线面</el-col>
    </el-row> -->
    <div style="height: 1000px;" />
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  mounted() {
    this.drawChart()
    this.drawCharta()
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('main'))
      // 指定图表的配置项和数据
      const option = {
        color: ['#ff5757'],
        tooltip: {
          trigger: 'axis'
        },
        title: {
          text: '销售曲线图',
          left: 'center',
          subtextStyle: {
            fontSize: 20
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['星期一', '星期一', '星期一', '星期一', '星期一']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '销售额',
            type: 'line',
            smooth: 0.6,
            stack: '总量',
            itemStyle: {
              normal: { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0, color: '#d9d9d9' // 0% 处的颜色
                }, {
                  offset: 0.5, color: '#fdc8c9' // 100% 处的颜色
                }, {
                  offset: 1, color: '#fff' // 100% 处的颜色
                }]
                ), // 背景渐变色
                lineStyle: { // 系列级个性化折线样式
                  width: 3,
                  color: '#ff5757'
                }
              }
            }, // 线条样式
            symbolSize: 3, // 折线点的大小
            areaStyle: { normal: {}},
            data: [80, 332, 20, 582, 130]
          }

        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    drawCharta() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('main11'))
      // 指定图表的配置项和数据
      const option = {
        tooltip: {
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        title: {
          text: '销售额分布',
          left: 'center',
          subtextStyle: {
            fontSize: 20
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['北京市', '金燕龙', '霍营街'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '16%',
            data: [450, 52, 200, 334]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .sbott{
  min-height: 400px !important;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.bottert{
  display: flex;
  flex: 1;
  .chart{
    width: 100%;
    height: 100%;
  }
}
.app-main {
  .week-month{
    float: right !important;
    .is-checken{
      background: #fff;
    -webkit-box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    border-radius: 7px;
    font-weight: 600;
    color: #333 !important;
    }
    display: flex;
    justify-content: center;
    align-items: center;
    width: 129px;
    height: 34px;
    background: rgba(233,243,255,.37);
    border-radius: 10px;
    .itme{
      width: 37px;
    height: 25px;
    font-size: 14px;
    color: #9ca3b4;
    cursor: pointer;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    }
  }
  .sbott{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    height: calc(40vh - 68px);
    min-height: 352px;
    margin-top: 20px;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    .header{
      display: flex;
      justify-content: space-between;
      .title{
font-weight: 700;
    color: #333;
      }
    }
  }
  .imgbbitme22{
    width: 100% !important;
  }
  .iimgbbi{
    color: #ff5757;
    font-size: 12px;
  }
  .imgbbitme{
    text-align: center;
    text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
    color: #ff5757;
    height: 50px;
    font-size: 36px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    line-height: 50px;
  }
    padding: 20px;
    .maning{
      height: calc(20vh - 24px);
    min-height: 166px;
      margin-left: 25px;
    padding: 20px;

    border-radius: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    background: #fbefe8 url(./image/downloadbb.png) no-repeat calc(100% - 12px) 100%;
    }
    .leftba{
      background: #e9f3ff;
      background-image: url(./image/download.png),url(./image/task.66b715b7.png);
    background-repeat: no-repeat,no-repeat;
    background-position: 0 0,calc(100% - 12px) 100%;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: calc(20vh - 24px);
    min-height: 166px;
    border-radius: 20px;
    .header{
      display: flex;
    }
    .body{
    -webkit-box-flex: 1;
    flex: 1;
    display: flex;
    .itme{
      display: inline-flex;
      -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  font-size: 30px;
  .color2{
    color: #91a7dc;
    height: 17px;
  margin-top: 3px;
  font-size: 12px;
  font-family: PingFangSC-Regular,PingFang SC;
  font-weight: 400;
  line-height: 17px;
  }
  .text-shadow1{
    text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
    color: #072074;
    height: 50px;
  font-size: 36px;
  font-family: PingFangSC-Semibold,PingFang SC;
  font-weight: 600;
  line-height: 50px;
  }
    }
  }
}
.mainimg{
  background-image: url(./image/downloadbb.png);
}
.state{
  text-align: center;
  width: 25%;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}
}
</style>
